import React, { FC, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { IProductInfo, getQuickSelect } from '@/modules/product'
import { get, post } from '@/utils/request'

import storage from '@/utils/storageManage'

import TestWithRoute from './testWithRoute'

type Props = {}

interface IStore {
  productInfo: IProductInfo
  [key: string]: any
}

const Test: FC<Props> = props => {
  // 每次组件被重新执行时生成并赋值
  // 获取当前store中最新的state
  const state = useSelector(({ productInfo }: IStore) => ({ productInfo }))
  // 仅在组件初始化时执行并赋值
  const dispatch = useDispatch()
  // 渲染完成后执行
  React.useEffect(() => {
    post('/api/login', {
      account: '18612692926',
      password: '123321',
    }).then((res: any) => {
      storage.set('token', res.data.token, res.data.expires_time - 10795)
    })
  }, [])

  React.useEffect(() => {
    setTimeout(() => {
      console.log('10秒后发起请求，需要token')
      get('/api/category?limit=6', { name: 'fasdfasd', id: 2342 }, { needToken: true })
    }, 10000)
  }, [])

  return <div><TestWithRoute>fasddfasdfasdf</TestWithRoute></div>
}

export default Test

// redux提供了以下几个方法
// getstate 用于获取当前的store中的所有数据
// var state = getstate()
// subscribe 用于监听当前store数据的变化，它是一个函数
// subscribe(() => {
// var state = getstate()
// })
// 上面两个方法都由react-redux帮我们实现了，我们不需要处理
// dispatch
// 用来将符合规定的action对象派发到store里， 使用payload是一个约定俗成的规则，大家看见payload就知道这个是需要写入的数据
// action对象必须包含一个type属性，其它属性没有规定
// action = {
//   type: 'xxx',
//   cc: 123,
//   bb: 'fsdaf'
// }
// redux中间件有哪些
// log, 怎样使用redux实现异步：thunk和promise

// 使用promise实现异步

// 类组件的action必须使用mapDispatchToProps将它注入到组件，然后在组件中使用this.props.actionFunction方法来调用才能将数据存入到store
// 函数组件必须使用useDispatch方法来派发
